<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item"
                 style="margin-left: 10px;"
                 type="primary"
                 size="mini"
                 icon="el-icon-edit"
                 @click="handleCreate">
        添加
      </el-button>
    </div>

    <el-table :data="list"
              style="width: 100%; margin-bottom: 20px;"
              row-key="Id"
              border
              highlight-current-row
              default-expand-all
              v-loading="listLoading"
              :tree-props="{children: 'Items'}">
      <el-table-column prop="Title"
                       label="菜单标题"
                       width="220">
      </el-table-column>
      <el-table-column prop="Icon"
                       label="图标"
                       width="110">
      </el-table-column>
      <el-table-column prop="Route"
                       label="路由"
                       width="150">
      </el-table-column>
      <el-table-column prop="View"
                       label="视图">
      </el-table-column>
      <el-table-column prop="IsVisible"
                       label="是否可见"
                       width="100">
        <template slot-scope="{row}">
          <div slot="reference"
               class="name-wrapper"
               v-if="!row.IsVisible">
            <el-tag size="medium"
                    type="info">隐藏</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Sort"
                       label="排序"
                       width="100">
      </el-table-column>
      <el-table-column label="操作"
                       width="350">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleCreate(scope.$index, scope.row)">添加子菜单</el-button>
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <update-dialog ref="update"></update-dialog>
  </div>
</template>
<script>
import { read, destroy } from '@/api/sys/menu'
import update from './update'

export default {
  name: 'SysMenu',
  components: {
    'update-dialog': update
  },
  data () {
    return {
      listLoading: true,
      list: [],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.listLoading = true
      read().then(response => {
        this.list = response.Data
        this.listLoading = false
      })
    },
    handleCreate (index, row) {
      if (row)
        this.$refs.update.openNew(row.Id)
      else
        this.$refs.update.openNew()
    },
    handleEdit (index, row) {
      this.$refs.update.openEdit(row.Id)
    },
    handleDelete (index, row) {
      let that = this
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        destroy(row.Id).then(response => {
          that.getList()
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => { });
    }
  },
}
</script>

<style scoped>
.pagination-container {
  margin: 20px 00px 0px 0px;
}
</style>
